<template>
  <div v-transfer-dom class="address-selector">
    <popup
      v-model="showPopup"
      position="bottom"
      width="100%"
      class="popup-wrapper"
      @on-hide="toggle(false)"
      @on-show="toggle(true)">
      <div style="text-align:center;" :style="{paddingBottom: paddingBottom + 'px'}">
        <p class="title">
          <span>目的地选择</span>
          <span v-show="showClear" class="clear" @click.stop="clear">清空<i class="icon iconfont icon-delete"/></span>
        </p>
        <grid :cols="4" :show-lr-borders="false" :show-vertical-dividers="false">
          <grid-item v-for="item in areaList" :key="item.id">
            <div class="item" :class="{active: item.id === current}" @click="selectArea(item)">
              {{item.name}}
            </div>
          </grid-item>
        </grid>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup, Grid, GridItem } from 'vux'
import { mapGetters } from 'vuex'
import { isIphoneX } from '@/assets/js/brower'

export default {
  model: {
    prop: 'value',
    event: 'toggle'
  },
  props: {
    value: Boolean,
    showClear: {
      type: Boolean,
      default: true
    },
    current: {
      type: String,
      default: ''
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Popup, Grid, GridItem
  },
  data () {
    return {
      showPopup: this.value
    }
  },
  created () {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
  },
  computed: {
    ...mapGetters(['areaList'])
  },
  methods: {
    toggle (val) {
      this.$emit('toggle', val)
    },
    selectArea (item) {
      this.$emit('selectArea', item)
    },
    clear() {
      this.$emit('clear')
    }
  },
  watch: {
    value (val) {
      this.showPopup = val
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'

.popup-wrapper
  background: #fff;
  .item
    font-size 15px
    border 1px solid lightgrey
    padding 6px 10px
    border-radius 4px
    color #333
  .active
    border-color $color-theme
    color $color-theme
  .title
    margin 10px 0
    font-size 18px
    text-align center
    position relative
    .clear
      position absolute
      right 18px
      top 5px
      font-size 14px
      color #999
      float right
      i
        margin-left 2px
</style>

<style>
.address-selector .weui-grid {
  padding: 12px 6px
}
</style>
